<template>
	<view class="my-date-time">
		<view class="q-datetime">
			<template v-if="showType == 0 || showType == 1">
				<view class="q-date" @click="showDate(1)">
					<view class="q-text" :style="{'color': color}" v-if="dtobj.date">{{dtobj.date}}</view>
					<view class="q-placeholder" v-else>{{datePlaceholder || '出发日期'}}</view>
					<u-icon v-if="showType == 1" name="arrow-right" color="#999"></u-icon>
				</view>
			</template>
			
			<template v-if="showType == 0 || showType == 2">
				<label class="q-sline">|</label>
				<view class="q-time" @click="showDate(2)">
					<view class="q-text" :style="{'color': color}" v-if="dtobj.time">{{dtobj.time}}</view>
					<view class="q-placeholder" v-else>{{timePlaceholder || '出发时间'}}</view>
				</view>
			</template>
		</view>
		
		<u-picker
			mode="time" 
			start-year="2000"
			end-year="2100"
			:safe-area-inset-bottom="true"
			v-model="timeMd.show" 
			:params="timeMd.ps"
			:default-time="timeMd.deftime"
			@confirm="okSelTime"
		></u-picker>
	</view>
</template>

<script>
	export default {
		name:"my-date-time",
		props: {
			// 参数名称
			name: {
				type: String,
				default: ''
			},
			// 日期时间
			dateTime: {
				type: Object,
				default: function(){
					return {}
				}
			},
			// 日期提示
			datePlaceholder: {
				type: String,
				default: '出发日期'
			},
			// 时间提示
			timePlaceholder: {
				type: String,
				default: '出发时间'
			},
			// 文字颜色
			color: {
				type: String,
				default: '#00c3ce'
			},
			// 是否只显示日期/时间
			showType: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				// 时间弹框对象
				timeMd: {
					// 是否显示
					show: false,
					// 默认值
					deftime: '',
					ps: {
						year: true,
						month: true,
						day: true,
						hour: false,
						minute: false,
						second: false,
						// 选择时间的时间戳
						timestamp: true
					}
				},
				// 日期时间对象
				dtobj: {
					date: '',
					time: ''
				},
			};
		},
		watch: {
			dateTime: {
				handler: function(o){
					// console.log('监听日期时间', o);
					
					// 设置显示值
					this.dtobj.date = o.date;
					this.dtobj.time = o.time;
					
					// 设置默认值
					if(o) this.timeMd.deftime = `${o.date} ${o.time}`;
				},
				// 对象属性修改时也会被调用
				deep: true,
				// 该回调将会在侦听开始之后被立即调用
				immediate: true
			}
		},
		created() {
			const that = this, U = that.U, md = that.timeMd;
			// console.log('父级传入数据', this.name, this.dateTime);
			
			// 1-显示日期 2-显示时间 0-显示日期和时间
			if(this.showType == 1) {
				md.ps = {
					year: true,
					month: true,
					day: true,					
					// 选择时间的时间戳
					timestamp: true
				};
				
				if(!that.dtobj.date) {
					that.timeMd.deftime = that.U.date2str(new Date());
				}
			}else{
				md.ps = {
					hour: true,
					minute: true,
					// 选择时间的时间戳
					timestamp: true
				};
				
				if(!that.dtobj.time) {
					that.timeMd.deftime = that.U.date2str(new Date());
				}
			}
		},
		mounted() {
			// if(!this.dateTime.date){
			// 	this.timeMd.deftime = this.U.date2str(new Date()).split(' ')[0];
			// }
			
			// if(!this.dateTime.time){
			// 	this.timeMd.deftime = this.U.date2str(new Date()).split(' ')[1];
			// }
		},
		methods: {
			// 显示日期时间
			showDate(type){
				const that = this, U = that.U, md = that.timeMd;
				
				md.show = true;
				if(type == 1){
					md.ps = {
						year: true,
						month: true,
						day: true,					
						// 选择时间的时间戳
						timestamp: true
					};
					
					if(!that.dtobj.date) {
						that.timeMd.deftime = that.U.date2str(new Date());
					}
				}else if(type == 2){
					md.ps = {
						hour: true,
						minute: true,
						// 选择时间的时间戳
						timestamp: true
					};
					
					if(!that.dtobj.time) {
						that.timeMd.deftime = that.U.date2str(new Date());
					}
				}
			},
			// 选择确定
			okSelTime(e){
				console.log('时间确定', e);
				const that = this, U = that.U, ps = that.dtobj;
				
				if(e.year){// 日期选择
					ps.date = `${e.year}-${e.month}-${e.day}`;
				}else if(e.hour){// 时间选择
					ps.time = `${e.hour}:${e.minute}:00`;
				}
				
				console.log('参数对象', that.dtobj);
				
				that.$emit('myClick', {name: that.name, obj: that.dtobj});
			},
		},
	}
</script>

<style lang="less">
.my-date-time{
	.q-datetime{
		display: flex;
		
		.q-date{// 日期
			// width: 165rpx;
			display: flex;
		}
		
		.q-sline{// 分割线
			margin: 0 10rpx;
		}
		
		.q-time{// 时间
			flex: 1;
			
			.q-text{
				width: 112rpx;
			}
		}
		
		.q-placeholder{// 提示文字
			color: #c0c4cc;
			text-align: right;
		}
	}
}
</style>
